<template>
  <div class="startup-box">
    <div class="rate-box">
      <div class="rate-box-title">
        <h4>Android 启动数据</h4>
        <div class="condition">
          <el-form ref="form" :model="conditionForm" label-width="40px" :inline="true" size="small">
            
            <el-form-item label="平台" class="selectw">
              <el-select v-model="conditionForm.plant" placeholder="平台" size="small" label="平台">
                <el-option
                  v-for="item in plantOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="版本" class="selectw">
              <el-select v-model="conditionForm.version" placeholder="版本" size="small" label="版本">
                <el-option
                  v-for="item in vOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="rate-item" v-for="rate in rateData" >
        <div class="rate-item-cont">
          <div class="item-detail" >
            <span class="item-detail-value">{{ rate.value }}</span>
            <span class="item-detail-name">{{ rate.title }}</span>
          </div>
        </div>
      </div>
    </div>
    <el-row>
      <el-col :span="24" style="height:500px;">
        <div id="startchart" style="width: 100%; height:100%;" v-loading="lineLoading"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'

   // 启动数据
  var countsData = [
    ['00:10', 86, 109],
    ['00:25', 89, 119],
    ['00:40', 90, 129],
    ['00:55', 99, 139],
    ['01:10', 86, 109],
    ['01:25', 67, 99],
    ['01:40', 90, 119],
    ['01:55', 88, 139],
    ['02:10', 86, 109],
    ['02:25', 78, 99],
    ['02:40', 90, 119],
    ['02:55', 99, 139],
    ['03:10', 86, 109],
    ['03:25', 67, 99],
    ['03:40', 90, 119],
    ['03:55', 99, 139],
    ['04:10', 86, 109],
    ['04:25', 67, 99],
    ['04:40', 90, 119],
    ['04:55', 99, 139],
    ['05:10', 86, 109],
    ['05:25', 67, 99],
    ['05:40', 90, 119],
    ['05:55', 99, 139],
    ['06:10', 86, 109],
    ['06:25', 67, 99],
    ['06:40', 90, 119],
    ['06:55', 99, 139],
    ['07:10', 86, 109],
    ['07:25', 67, 99],
    ['07:40', 90, 119],
    ['07:55', 99, 139],
    ['08:10', 129, 150],
    ['08:25', 135, 155],
    ['08:40', 86, 110],
    ['08:55', 73, 97],
    ['09:10', 85, 108],
    ['09:25', 73, 96],
    ['09:40', 68, 94],
    ['09:55', 92, 119],
    ['10:10', 130, 180],
    ['10:25', 245, 270],
    ['10:40', 139, 180],
    ['10:55', 115, 150],
    ['11:10', 111, 140],
    ['11:25', 129, 250],
    ['11:40', 206, 240],
    ['11:55', 137, 161],
    ['12:10', 128, 151],
    ['12:25', 85, 110],
    ['12:40', 94, 118],
    ['12:55', 71, 105],
    ['13:10', 106, 140],
    ['13:25', 84, 110],
    ['13:40', 93, 116],
    ['13:55', 85, 108],
    ['14:10', 73, 102],
    ['14:25', 83, 108],
    ['14:40', 125, 150],
    ['14:55', 107, 140],
    ['15:10', 82, 111],
    ['15:25', 44, 70],
    ['15:40', 72, 100],
    ['15:55', 106, 139],
    ['16:10', 107, 140],
    ['16:25', 66, 110],
    ['16:40', 91, 122],
    ['16:55', 92, 120],
    ['17:10', 113, 140],
    ['17:25', 107, 150],
    ['17:40', 131, 161],
    ['17:55', 111, 151],
    ['18:10', 113, 140],
    ['18:25', 107, 150],
    ['18:40', 131, 161],
    ['18:55', 111, 151],
    ['19:10', 113, 140],
    ['19:25', 107, 150],
    ['19:40', 131, 161],
    ['19:55', 111, 151],
    ['20:10', 113, 140],
    ['20:25', 107, 150],
    ['20:40', 131, 161],
    ['20:55', 111, 151],
    ['21:10', 113, 140],
    ['21:25', 107, 150],
    ['21:40', 131, 161],
    ['21:55', 111, 151],
    ['22:10', 113, 140],
    ['22:25', 107, 150],
    ['22:40', 131, 161],
    ['22:55', 111, 151],
    ['23:10', 113, 140],
    ['23:25', 107, 150],
    ['23:40', 131, 161],
    ['23:55', 111, 151]]
  // 整理数据
  var dateList = countsData.map(item => item[0])
  var nowCounts = countsData.map(item => item[1])
  
  // 升降数据
  var rateData = [
    {
      title: '首次启动时长（ms）',
      value: '300'
    },
    {
      title: 'Bundle启动加载时长（ms）',
      value: '200'
    }
  ]

  export default {
    data () {
      return {
        rateData: rateData,
        dateList: dateList,
        nowCounts: nowCounts,
        lineLoading: true,
        startchart: '',
        conditionForm: {
          setapp: '',
          plant: '',
          version: ''
        },
        vOptions: [{
          value: '1.1',
          label: '1.1'
        }, {
          value: '1.2',
          label: '1.2'
        }, {
          value: '2.1',
          label: '2.1'
        }],
        plantOptions: [{
          value: 'cat2',
          label: '应用保障'
        }, {
          value: 'itinsight',
          label: 'itinsight'
        }, {
          value: 'infinitus',
          label: 'infinitus'
        }],
        styleColor: {
          // nowColor: '#3B73C3'
          nowColor: '#4793C0'
        }
      }
    },
    activated () {
      this.initEcharts()
    },
    methods: {
      initEcharts () {
        var _this = this
        // console.log(_this.dateList)
        console.log(_this.$store.state.common.sidebarFold)
        _this.startchart = echarts.init(document.getElementById('startchart'))
        _this.getstartEchart()
      },
      // 渲染启动数量图表
      getstartEchart () {
        var _this = this
        var option = {
          title: {
            text: 'App冷启动时长趋势图',
            left: '0',
            textStyle: {
              fontSize: 14
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: 20,
            data: ['启动时长'],
            itemGap: 10
          },
          color: [_this.styleColor.nowColor],
          dataZoom: [{
            type: 'inside',
            start: 30,
            end: 70
          }],
          xAxis: {
            boundaryGap: false,
            data: _this.dateList
          },
          yAxis: {
            axisTick: {
              interval: 0
            },
            splitLine: {
              show: false
            }
          },
          grid: [{
            top: '12%',
            left: '50px',
            right: 10
          }],
          series: [{
            name: '启动数量',
            type: 'line',
            showSymbol: false,
            data: _this.nowCounts,
            /* lineStyle: {
              color: _this.styleColor.nowColor
            }, */
            markLine: {
              data: [{
                type: 'average',
                name: '平均值'
              }],
              label: {
                show: false
              }
              /* lineStyle: {
                color: _this.styleColor.nowColor
              } */
            }
          }]
        }

        _this.startchart.setOption(option)

        _this.lineLoading = false
      }
    }
  }
</script>

<style scoped>
  .rate-box{
    overflow: hidden;
    margin-bottom: 20px;
  }
  .rate-box-title{
    padding: 0.8em 0.6em;
    position: relative;

  }
  .condition{
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 999;
    
  }
  .condition  .btnGroupClass{
      margin-left: 10px;
    }
  .condition  .selectw .el-form-item__content{
      width: 100px;
    }
  .rate-box .rate-item{
    float: left;
    width: 46%;
    margin-right: 3.3%;
    border: 1px solid #eee;
    box-sizing: border-box;
    box-shadow: 2px 2px 4px #eee;
  }
  .rate-box .rate-item:last-child{
    margin-right: 0;
  }
  .rate-box .rate-item .rate-item-title{
    margin: 0;
    padding: 0.8em 0.6em;
    border-bottom:  1px solid #ddd;
  }
  .rate-box .rate-item .rate-item-cont{
    overflow: hidden;
  }
  .rate-item .rate-item-cont .item-detail{
   
    margin: 1.4em 0;
  }
  .rate-item .rate-item-cont .item-detail .item-detail-name{
    padding-left: 1em;
    display: block;
    text-align: center
  }
  .rate-item .rate-item-cont .item-detail .item-detail-value{
    /* padding-left: 1em; */
    display: block;
    text-align: center;
    font-size: 60px;
  }
</style>